$(function () {
    echarts_7();
    echarts_8();
    echarts_9();
    echarts_12();
    echarts_10();



    function echarts_7() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart7'));

        // 异步请求获取外部 JSON 文件
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var jsonData = JSON.parse(this.responseText);

                var option = {
                    title: {
                        text: '酒店绩效雷达图',
                        subtext: '年度比较',
                        textStyle: {
                            color: '#fff' // 修改标题文字颜色为白色
                        }
                    },
                    grid: {
                        left: '0%',
                        top: '10px',
                        right: '0%',
                        bottom: '4%',
                        containLabel: true
                    },
                    legend: {
                        right: '0%',
                        textStyle: {
                            color: '#fff' // 修改图例文字颜色为白色
                        },
                        data: ['目标', '实际']
                    },
                    radar: {
                        name: {
                            textStyle: {
                                color: '#fff' // 修改雷达图指示器文字颜色为白色
                            }
                        },
                        indicator: [
                            { name: '房间占用率', max: 100 },
                            { name: '平均每日房价', max: 500 },
                            { name: '每可用房间收入', max: 5000 },
                            { name: '客人满意度', max: 100 },
                            { name: '员工效率', max: 100 }
                        ]
                    },
                    series: [{
                        name: '绩效比较',
                        type: 'radar',
                        data: [
                            {
                                value: jsonData.target,
                                name: '目标'
                            },
                            {
                                value: jsonData.actual,
                                name: '实际'
                            }
                        ],
                        itemStyle: { // 修改数据项样式
                            emphasis: { // 鼠标放置时的高亮样式
                                lineStyle: {
                                    width: 4
                                },
                                areaStyle: {
                                    opacity: 1
                                }
                            }
                        },
                        areaStyle: {
                            opacity: 0.5, // 设置阴影的透明度
                            color: {
                                type: 'linear',
                                x: 0.5,
                                y: 0,
                                x2: 0.5,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#91c7ae' // 设置目标阴影的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#f05b72", // 设置实际阴影的颜色
                                    }
                                ]
                            }
                        },
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }
        };
        xmlhttp.open('GET', 'dataVisualization/data/echarts_7.json', true);
        xmlhttp.send();
    }

    function echarts_8() {
        const dom = document.getElementById("echart8");
        const width = dom.clientWidth; // 获取容器宽度
        const height = dom.clientHeight; // 获取容器高度
        const myChart = echarts.init(dom, null, { renderer: "canvas", useDirtyRect: false, width: width, height: height });
    
        const cellSize = [60, 50];
        const pieRadius = 40;
    
        function getVirtualData() {
            const date = +echarts.time.parse('2017-02-01');
            const end = +echarts.time.parse('2017-03-01');
            const dayTime = 3600 * 24 * 1000;
            const data = [];
            for (let time = date; time < end; time += dayTime) {
                data.push([
                    echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
                    Math.floor(Math.random() * 10000)
                ]);
            }
            return data;
        }
        const scatterData = getVirtualData();
        const pieSeries = scatterData.map(function (item, index) {
            // 根据cellSize计算扇形图的大小
            const radiusX = cellSize[0] / 2 - 5;  // 可根据需要调整偏移量
            const radiusY = cellSize[1] / 2 - 5;  // 可根据需要调整偏移量
    
            return {
                type: 'pie',
                id: 'pie-' + index,
                center: item[0],
                radius: [0, Math.min(radiusX, radiusY)], // 使用较小的值作为半径
                coordinateSystem: 'calendar',
                label: {
                    formatter: '{c}',
                    position: 'inside'
                },
                data: [
                    { name: '1人', value: Math.round(Math.random() * 24) },
                    { name: '2人', value: Math.round(Math.random() * 24) },
                    { name: '3人及以上', value: Math.round(Math.random() * 24) }
                ]
            };
        });
        option = {
            legend: {
                right: '0',
                data: ['1人', '2人', '3人及以上'],
                bottom: 10,
                textStyle: {
                    color: '#fff'  // 设置图例文本的颜色为白色
                }
            },
            calendar: {
                top: 'middle',
                left: 'center',
                orient: 'vertical',
                cellSize: cellSize,
                yearLabel: {
                    show: false,
                    fontSize: 30
                },
                dayLabel: {
                    margin: 0,
                    firstDay: 1,
                    nameMap: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    textStyle: {
                        color: '#fff'  // 设置日期文本的颜色为白色
                    }
                },
                monthLabel: {
                    show: false
                },
                range: ['2017-02']
            },
            series: [
                {
                    id: 'label',
                    type: 'scatter',
                    coordinateSystem: 'calendar',
                    symbolSize: 0,
                    label: {
                        show: true,
                        formatter: function (params) {
                            return echarts.time.format(params.value[0], '{dd}', false);
                        },
                        offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
                        fontSize: 14
                    },
                    data: scatterData
                },
                ...pieSeries
            ]
        };
    
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    }


    function echarts_10() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("echart10"));

        var xData = function () {
            var data = [];
            for (var i = 1; i < 58; i++) {
                data.push(i + "日");
            }
            return data;
        }();
        $.getJSON("dataVisualization/data/echarts_10.json", function (data) {
            option = {
                // backgroundColor: "#1A1835",
                title: {
                    text: "酒店官网单日点击量与注册量",
                    subtext: '该数据来自酒店后台',
                    left: "0",
                    top: "0",
                    textStyle: {
                        color: '#fff',
                        fontSize: '17'
                    }
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        textStyle: {
                            color: "#fff"
                        }

                    },
                },
                grid: {
                    borderWidth: 0,
                    top: 110,
                    bottom: 95,
                    left: 50,
                    right: 5,
                    textStyle: {
                        color: "#fff"
                    }
                },
                legend: {
                    x: '65%',
                    top: '7%',
                    textStyle: {
                        color: '#90979c',
                    },
                    data: ['点击量', '注册量']
                },


                calculable: true,
                xAxis: [{
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "rgba(204,187,225,0.5)",
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    data: xData,
                }],

                yAxis: [{
                    type: "value",
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(204,187,225,0.5)",
                        }
                    },

                }],
                dataZoom: [{
                    show: true,
                    height: 30,
                    xAxisIndex: [0],
                    bottom: 30,

                    "start": 10,
                    "end": 80,
                    handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                    handleSize: '110%',
                    handleStyle: {
                        // color: "#5B3AAE",
                    },
                    textStyle: {
                        color: "rgba(204,187,225,0.5)",
                    },
                    fillerColor: "rgba(67,55,160,0.4)",
                    borderColor: "rgba(204,187,225,0.5)",

                }, {
                    type: "inside",
                    show: true,
                    height: 15,
                    start: 1,
                    end: 35
                }],
                series: [{
                    name: "注册量",
                    type: "line",
                    symbolSize: 10,
                    symbol: 'circle',
                    itemStyle: {
                        color: "#6f7de3",
                    },
                    markPoint: {
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        data: [{
                            type: 'max',
                            name: '最大值',

                        }, {
                            type: 'min',
                            name: '最小值'
                        }]
                    },
                    data: data.orderData,
                }, {
                    name: "点击量",
                    type: "line",
                    symbolSize: 10,
                    symbol: 'circle',
                    itemStyle: {
                        color: "#c257F6",
                    },
                    markPoint: {
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        data: [{
                            type: 'max',
                            name: '最大值',

                        }, {
                            type: 'min',
                            name: '最小值'
                        }]
                    },
                    data: data.clickData,
                },]
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        });
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_9() {
        var myChart = echarts.init(document.getElementById("echart9"));

        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['蜜月房', '主题房', '双床房', '家庭房', '情侣房', '大床房', '标准间'],
                textStyle: {
                    color: '#fff' // 调整图例文本颜色为白色
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                    color: '#fff' // 调整x轴文本颜色为白色
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff' // 调整x轴线颜色为白色
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#fff' // 调整y轴文本颜色为白色
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff' // 调整y轴线颜色为白色
                    }
                }
            },
            series: [
                {
                    name: '蜜月房',
                    type: 'line',
                    step: 'start',
                    data: [],
                    label: {
                        color: '#fff' // 调整数据标签颜色为白色
                    }
                },
                {
                    name: '主题房',
                    type: 'line',
                    step: 'middle',
                    data: []
                },
                {
                    name: '双床房',
                    type: 'line',
                    step: 'end',
                    data: []
                },
                {
                    name: '家庭房',
                    type: 'line',
                    step: 'end',
                    data: []
                },
                {
                    name: '情侣房',
                    type: 'line',
                    step: 'end',
                    data: []
                },
                {
                    name: '大床房',
                    type: 'line',
                    step: 'end',
                    data: []
                },
                {
                    name: '标准间',
                    type: 'line',
                    step: 'end',
                    data: []
                }
            ]
        };

        // 发起 Ajax 请求获取 JSON 数据
        $.getJSON('dataVisualization/data/echarts_9.json', function (data) {
            // 将获取到的数据分别赋值给 option 中的 xAxis.data 和 series 中的各个数据项
            option.xAxis.data = data.xAxisData;
            option.series[0].data = data.seriesData["蜜月房"];
            option.series[1].data = data.seriesData["主题房"];
            option.series[2].data = data.seriesData["双床房"];
            option.series[3].data = data.seriesData["家庭房"];
            option.series[4].data = data.seriesData["情侣房"];
            option.series[5].data = data.seriesData["大床房"];
            option.series[6].data = data.seriesData["标准间"];

            myChart.setOption(option); // 设置图表的 option
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        });
    }


    function echarts_12() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart12'));
        option = {
            backgroundColor: 'rgba(255,255,255,0)',
            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            tooltip: {
                formatter: "{a} <br/>{c} {b}"
            },
            toolbox: {
                show: true,
                feature: {
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: '房间占用数量',
                    type: 'gauge',
                    z: 3,
                    min: 0,
                    max: 100,
                    splitNumber: 10,
                    radius: '80%',
                    center: ['50%', '50%'],
                    backgroundColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: '#001c33' },
                            { offset: 1, color: '#06274e' }
                        ]
                    },
                    axisLine: {
                        lineStyle: {
                            color: [
                                [0.2, '#1954a6'],
                                [0.8, '#00b050'],
                                [1, '#ffa500']
                            ],
                            width: 10
                        }
                    },
                    axisTick: {
                        length: 15,
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    splitLine: {
                        length: 20,
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    title: {
                        offsetCenter: [0, '100%'],
                        textStyle: {
                            color: 'white',
                            fontWeight: 'bold',
                            fontSize: 14,
                            fontStyle: 'italic'
                        }
                    },
                    detail: {
                        textStyle: {
                            color: 'white',
                            fontWeight: 'bold'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'white'
                        }
                    },
                    data: [{ value: 40, name: '房间占用数量（未退房）' }]
                },
                {
                    name: '房间未打扫数量',
                    type: 'gauge',
                    center: ['20%', '55%'],
                    radius: '70%',
                    min: 0,
                    max: 200,
                    endAngle: 45,
                    splitNumber: 8,
                    backgroundColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: '#001c33' },
                            { offset: 1, color: '#06274e' }
                        ]
                    },
                    axisLine: {
                        lineStyle: {
                            color: [
                                [1, 'gold']
                            ],
                            width: 8
                        }
                    },
                    axisTick: {
                        length: 12,
                        lineStyle: {
                            color: 'gold'
                        }
                    },
                    splitLine: {
                        length: 20,
                        lineStyle: {
                            color: 'gold'
                        }
                    },
                    pointer: {
                        width: 5
                    },
                    title: {
                        offsetCenter: [0, '100%'],
                        textStyle: {
                            color: 'white',
                            fontSize: 10,
                            fontWeight: 'bold'
                        }
                    },
                    detail: {
                        textStyle: {
                            color: 'white',
                            fontWeight: 'bold'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'white'
                        }
                    },
                    data: [{ value: 58, name: '房间未打扫数量' }]
                },
                {
                    name: '打扫卫生合格房间数量',
                    type: 'gauge',
                    center: ['80%', '55%'],
                    radius: '70%',
                    min: 0,
                    max: 100,
                    startAngle: 140,
                    endAngle: -45,
                    splitNumber: 8,
                    backgroundColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: '#001c33' },
                            { offset: 1, color: '#06274e' }
                        ]
                    },
                    axisLine: {
                        lineStyle: {
                            color: [
                                [1, 'red']
                            ],
                            width: 8
                        }
                    },
                    axisTick: {
                        length: 12,
                        lineStyle: {
                            color: 'auto'
                        }
                    },
                    splitLine: {
                        length: 20,
                        lineStyle: {
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width: 5
                    },
                    title: {
                        offsetCenter: [0, '100%'],
                        textStyle: {
                            color: 'white',
                            fontSize: 10
                        }
                    },
                    detail: {
                        textStyle: {
                            color: 'white'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'white'
                        }
                    },
                    data: [{ value: 78, name: '打扫卫生合格房间数量' }]
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
});
